<template>
    <view class="bg">
        <view class="name"></view>
        <input type="text" class="username" maxlength=11 placeholder="请输入新昵称" v-model="username">
        <button @click="editOtherInfo">保存</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                username: ''
            }
        },
        methods: {
            //修改名字
            editOtherInfo() {
                const token = uni.getStorageSync('token');
                this.$request(
                    '/comic-time/personal/editNickname', {
                        "userNickname": this.username
                    },
                    'POST', {
                        'Authorization': token,
                    },
                ).then(res => {
                    console.log(res)
                    uni.showToast({
                        title: res.msg,
                        position: "center",
                        icon: "none",
                        duration: 2000,
                        mask: true
                    });
                });
            },
        }
    }
</script>

<style lang="scss" scoped>
    .bg {
        width: 100%;
        height: calc(100vh - 80rpx);
        background-color: #F5F5F5;
        position: relative;

        .name {
            width: 100%;
            height: 50rpx;
            border-top: 1rpx solid #fff;
        }

        input {
            width: 100%;
            height: 50rpx;
            box-sizing: border-box;
            padding: 0 20rpx;
            font-size: 30rpx;
            border: none;
            border-bottom: 1rpx solid #e5e5e5;
        }

        button {
            width: 120rpx;
            height: 60rpx;
            border-radius: 10rpx;
            border: solid 2rpx #dddddd;
            margin-top: 30rpx;
            font-family: PingFangSC-Medium;
            font-size: 25rpx;
            line-height: 60rpx;
            color: #000000;
            text-align: center;
            background-color: #E6E6E6;
        }
    }
</style>
